<template>
  <div id="userlist">
    <el-card id="cardtop">
      <el-form ref="form" :inline="true" class="demo-form-inline" :model="form">
        <el-form-item label="用户名称" prop="username">
          <el-input
            v-model.trim="form.username"
            style="width: 100px; height: 40px"
          />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input
            v-model.trim="form.email"
            style="width: 150px; height: 40px"
          />
        </el-form-item>
        <el-form-item label="角色" prop="role_id">
          <el-select
            v-model="form.role_id"
            placeholder="请选择"
            style="width: 150px; height: 40px"
          >
            <el-option label="超级管理员" value="1" />
            <el-option label="管理员" value="2" />
            <el-option label="老师" value="3" />
            <el-option label="学生" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 70px; height: 40px"
            @click="querying"
          >查询</el-button>
          <el-button
            style="width: 70px; height: 40px"
            @click="cleared"
          >清除</el-button>
          <el-button
            type="primary"
            style="width: 117px; height: 40px"
            @click="AddEvent"
          >新增用户</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card id="cardbottom">
      <el-table width="100%" :data="datalist">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>{{ $index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="username" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="角色" prop="role" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column
          :formatter="playbackFormat"
          label="状态"
          prop="status"
        />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button ref="btn" type="text" @click="forbidden(row)">{{
                row.status ? '禁用' : '启用'
              }}</el-button>
              <el-button type="text" @click="cancel(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[1, 10, 20, 30, 40]"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <Add ref="dialog" :role="form.role_id" @getData="getData" />
  </div>
</template>

<script>
// 导入枚举文件
import user from '@/api/constan/userRloe.js'
// 导入api
import { userList, userRemove, userStatus } from '@/api/user'
// 导入组件
import Add from './components/add.vue'

export default {
  // 注册组件
  components: {
    Add
  },
  data() {
    return {
      datalist: [],
      isShow: false,
      form: {
        username: '', //	否	string	昵称
        email: '', //	否	string	邮箱
        role_id: '', //	否	string	1角色数字 2管理员、3老师、 4学生
        page: '', //	否	string	页码 默认为1
        limit: ''
      },
      page: {
        total: 1,
        pape: 1,
        limit: 10
      },

      currentPage: 4
    }
  },

  // created钩子函数
  created() {
    this.getData()
  },
  methods: {
    handleSizeChange(limit) {
      this.page.limit = limit
      this.page.pape = 1
      this.getData()
    },
    handleCurrentChange(page) {
      this.page.pape = page
      this.getData()
    },

    // 查修按钮
    querying() {
      this.getData()
      this.$message.success('查询成功')
    },
    // 清除按钮
    cleared() {
      this.form.username = ''
      this.form.email = ''
      this.form.role_id = ''
      this.getData()
    },
    // 新增按钮
    AddEvent() {
      this.$refs.dialog.isShow = true
      this.$refs.dialog.mode = 'add'
    },
    // 发起请求，获取数据
    async getData() {
      const res = await userList({
        ...this.form,
        page: this.page.pape,
        limit: this.page.limit
      })
      // console.log(`用户列表${res}`)
      // 角色
      res.data.data.items.forEach((item) => {
        const result = user.role.find((itemTwo) => {
          return itemTwo.role_id === item.role_id
        })
        const resultStr = result ? result.Value : '-'
        item.role_id = resultStr
      })
      // // 状态
      // res.data.items.forEach((item) => {
      //   const result = item.status ? '启用' : '禁用'
      //   item.status = result
      // })
      this.datalist = res.data.data.items
      this.page.total = res.data.data.pagination.total
    },

    // 状态
    playbackFormat(row) {
      if (row.status === 0) {
        return '禁用'
      } else {
        return '启用'
      }
    },
    // 删除按钮
    async cancel(id) {
      const res = await userRemove(id)
      console.log(res)
      this.$message.success('删除成功')
      this.getData()
    },
    // 禁用按钮
    async forbidden(row) {
      await userStatus(row.id)
      this.$message.success('设置状态成功')
      this.getData()
    },
    // 编辑按钮
    edit(row) {
      if (row.status === 0) {
        row.status = '禁用'
      } else {
        row.status = '启用'
      }
      this.$refs.dialog.isShow = true
      this.$refs.dialog.mode = 'edit'
      this.$refs.dialog.form = JSON.parse(JSON.stringify(row))
    }
  }
}
</script>

<style lang="scss" scoped>
#userlist {
  #cardtop {
    font-size: 12px;
    margin-bottom: 21px;
  }
  margin: 15px;
  #cardbottom {
    // margin-top: 15px;
    .block {
      text-align: center;
    }
  }
}
</style>
